import React from 'react';
import { Tooltip } from 'antd';
import { useTablePipeline } from 'ali-react-table';
import { AntdBaseTable } from '@/base/TBaseTable';
import { operationList } from '../../dictionary';
import type { IOptionType, IDataSourceType } from '../../type';
import { IOperationType } from '../../type';
import { ToFixed } from '../../tool';

import styles from './index.less';

interface IProps {
  /**
   * 数据源
   */
  dataSource?: IDataSourceType[];
  /**
   * 操作权限列表
   */
  buttonPermissions?: any;
  /**
   * 编辑数据
   */
  onEdit?: (operationType: IOperationType, record: IDataSourceType) => void;
  /**
   * 删除数据
   */
  onDetele?: (record: IDataSourceType) => void;
}

const List = (props: IProps) => {
  const { dataSource = [], onDetele, onEdit } = props;

  // 编辑
  const _onEdit = (record: any) => {
    onEdit && onEdit(IOperationType.EDIT, record);
  };

  // 删除
  const _onDetele = (record: any) => {
    onDetele && onDetele(record);
  };

  // 操作
  const onOperation = async (item: IOptionType, record: any) => {
    if (item.value === IOperationType.EDIT) {
      _onEdit(record);
    } else if (item.value === IOperationType.DETELE) {
      _onDetele(record);
    }
  };

  const columns = [
    {
      code: 'rank',
      name: '序号',
      width: 80,
      align: 'center',
      render(v: string, record: IDataSourceType, index: number) {
        return index + 1;
      },
    },
    {
      code: 'provinceName',
      name: '省份',
      width: 120,
      align: 'center',
      render(v: string) {
        return (
          <div className={styles.text}>
            <Tooltip placement="topLeft" title={v}>
              {v || '-'}
            </Tooltip>
          </div>
        );
      },
    },
    {
      code: 'groupName',
      name: '所属集团',
      width: 120,
      align: 'center',
      render(v: string) {
        return (
          <div className={styles.text}>
            <Tooltip placement="topLeft" title={v}>
              {v || '-'}
            </Tooltip>
          </div>
        );
      },
    },
    {
      code: 'stationName',
      name: '交易单元',
      width: 120,
      align: 'center',
      render(v: string) {
        return (
          <div className={styles.text}>
            <Tooltip placement="topLeft" title={v}>
              {v || '-'}
            </Tooltip>
          </div>
        );
      },
    },
    {
      code: 'showName',
      name: '显示名称',
      width: 120,
      align: 'center',
      render(v: string) {
        return (
          <div className={styles.text}>
            <Tooltip placement="topLeft" title={v}>
              {v || '-'}
            </Tooltip>
          </div>
        );
      },
    },
    {
      code: 'longitude',
      name: '东经',
      width: 120,
      align: 'center',
      render(v: number) {
        return v || v === 0 ? ToFixed(v, 6) : '-';
      },
    },
    {
      code: 'latitude',
      name: '北纬',
      width: 120,
      align: 'center',
      render(v: number) {
        return v || v === 0 ? ToFixed(v, 6) : '-';
      },
    },
    {
      code: 'visible',
      name: '是否显示',
      width: 120,
      align: 'center',
      render(v: boolean) {
        return v ? '显示' : '不显示';
      },
    },
    {
      code: 'operation',
      name: '操作',
      width: 100,
      lock: true,
      align: 'center',
      render(v: number, record: any) {
        return (
          <div className={styles.options}>
            {operationList.map((item) => {
              return (
                <div
                  key={item.value}
                  className={styles.item}
                  onClick={() => onOperation(item, record)}
                >
                  {item.label}
                </div>
              );
            })}
          </div>
        );
      },
    },
  ];

  const pipeline = useTablePipeline({})
    .input({ dataSource: dataSource, columns: columns as any })
    .primaryKey('id')
    .appendRowPropsGetter((): any => {
      const color = '#222629';
      return {
        style: { '--bgcolor': color, '--hover-bgcolor': color },
      };
    });

  return (
    <div className={`${styles.container}`}>
      <AntdBaseTable
        useVirtual={{ horizontal: true, vertical: true, header: false }}
        style={{
          '--row-height': '28px',
          // '--header-bgcolor': '#383C3E',
          '--header-row-height': '28px',
          '--cell-padding': '4px 16px',
          '--cell-border-vertical': '1px solid #4E5154',
          '--header-cell-border-vertical': '1px solid #4E5154',
          '--hover-bgcolor': '#222629',
        }}
        {...pipeline.getProps()}
      />
    </div>
  );
};

export default List;
